<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>{$data.name} --- 图片展示</title>
<import type="js" file="js.jquery" />
<import type="css" file="css.album" />
</head>

<body>
<div id="mainer">
  <div class="imgnav" id="imgnav">
    <div id="img">
      <div class="pic">
    	<volist name="list" id="vo">
    	<img src="" rel="__ROOT__/Pictures/{$data.foldername}/big/{$vo.new_name}" alt="" />
    	</volist>
      </div>
      <div id="front" title="上一张"><a href="javaScript:void(0)"></a></div>
      <div id="next" title="下一张"><a href="javaScript:void(0)"></a></div>
    </div>
    <div id="intro"></div>
    <div id="cbtn"> <i class="picSildeLeft"><img src="__PUBLIC__/images/BlackLeft.gif"/></i> <i class="picSildeRight"><img src="__PUBLIC__/images/BlackRight.gif"/></i>
      <div id="cSlideUl">
        <ul>
        <volist name="list" id="vo">
    	<li><img src="__ROOT__/Pictures/{$data.foldername}/small/{$vo.new_name}" /><tt></tt></li>
    	</volist>
        </ul>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
$(function(){
	var index=0;
	var length=$("#img img").length;
	var i=1;
	function showImg(i){
		$("#img img")
			.eq(i).stop(true,true).fadeIn(800)
			.siblings("img").hide();
		$("#img img").eq(i).attr("src",$("#img img").eq(i).attr("rel"));
		$("#intro").html($("#img img").eq(i).attr("alt"));
		$("#cbtn li")
			.eq(i).addClass("hov")
			.siblings().removeClass("hov");
		window.location.href=window.location.href.split("#")[0]+"#p="+(i+1)
	}
	function slideNext(){
		if(index >= 0 && index < length-1) {
			++index;
			showImg(index);
		}else{
			if(confirm("已经是最后一张,点击确定重新浏览！")){
				showImg(0);
				index=0;
				aniPx=(length-7)*131+'px';
				$("#cSlideUl ul").animate({ "left": "+="+aniPx },200);
				i=1;
			}
			return false;
		}
		if(i<0 || i>length-7){return false}
		
		$("#cSlideUl ul").animate({ "left": "-=131px" },200)
		i++;
	}
	function slideFront(){
		if(index >= 1){
			--index;
			showImg(index);
        }
		if(i<2 || i>length+7) {return false;}
		
		$("#cSlideUl ul").animate({ "left": "+=131px" },200)
		i--;
	}
	var p=0;
	var url=window.location.href;
	if (url.indexOf("#p=")>0){
		p=parseInt(url.split("#p=")[1].split("&")[0]);
		if (p<=length&&p>0){
			p=p-1;
			i=p+1;
			index=p;
			aniPx=(p*131)+'px';
			$("#cSlideUl ul").animate({ "left": "-="+aniPx},200);
		}
		else{
			p=0;
		}
	}
	$("#img img").eq(p).show();
	$("#img img").eq(p).attr("src",$("#img img").eq(p).attr("rel"));
	$("#intro").html($("#img img").eq(p).attr("alt"));
	$("#cbtn li").eq(p).addClass("hov");
	$("#cbtn tt").each(function(e){
		var str=(e+1)+"/"+length;
		$(this).html(str)
	})
	
	$(".picSildeRight,#next").click(function(){
		slideNext();
	})
	$(".picSildeLeft,#front").click(function(){
		slideFront();
	})
	$(document).keydown(function(e){
		var code;
		if(!e) var e=window.event;
		if(e.keyCode){
			code=e.keyCode;
		}
		else if(e.which){
			code = e.which;
		}
		if(code == 37){
			slideFront();
        }
		else if(code == 39){
			slideNext();
		}
	})
	$("#cbtn li").click(function(){
		index  =  $("#cbtn li").index(this);
		showImg(index);
	})
	$("#next,#front").hover(function(){
		$(this).children("a").fadeIn();
	},function(){
		$(this).children("a").fadeOut();
	})
	$("html,body").animate({scrollTop:1},500);
})	
</script>
</body>
</html>
